import React, {  useState } from 'react';

import '@ant-design/v5-patch-for-react-19';
import { Typography, Card, Divider, Tag, Space, Tabs } from 'antd';
import { ClockCircleOutlined, DatabaseOutlined, FileTextOutlined, HistoryOutlined, BulbOutlined } from '@ant-design/icons';
const { Title, Text } = Typography;
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import rehypeRaw from 'rehype-raw';
import 'katex/dist/katex.min.css';
import './ProblemDescription.less';
import rehypeHighlight from 'rehype-highlight';
import "highlight.js/styles/atom-one-light.css";
import type { ProblemEntityAdminVO, TagInfo } from '../../api/vo/problemDetail';
import { SubmissionList } from '../judge';
// 创建上下文，用于在组件之间传递样例输入数据
export const ProblemContext = React.createContext<{
  sampleInput: string;
  setSampleInput: React.Dispatch<React.SetStateAction<string>>;
}>({
  sampleInput: '',
  setSampleInput: () => { }
});

interface ProblemDescriptionProps {
  problem?: ProblemEntityAdminVO;
  timeLimit?: number;
  memoryLimit?: number;
  tags?: TagInfo[];
}

const ProblemDescription: React.FC<ProblemDescriptionProps> = ({ problem, timeLimit, memoryLimit, tags }) => {
  const [activeTab, setActiveTab] = useState('description');

  if (!problem) return null;

  // 题目内容渲染（使用markdown格式）
  const renderProblemContent = () => (
    <div>
      <div
        className="markdown-preview"

      >
        <ReactMarkdown
          remarkPlugins={[remarkGfm, remarkMath]}
          rehypePlugins={[rehypeKatex, rehypeRaw, [rehypeHighlight, { detect: true }]]}
        >
          {problem?.content || ''}
        </ReactMarkdown>
      </div>

      {/* 时间和内存限制 */}
      <Divider style={{ margin: '16px 0' }} />
      <div style={{ padding: '0 16px 16px' }}>
        <Space direction="vertical" size="small" style={{ width: '100%' }}>
          <Space>
            <ClockCircleOutlined /> <Text type="secondary">时间限制：{timeLimit || 1000}ms</Text>
          </Space>
          <Space>
            <DatabaseOutlined /> <Text type="secondary">内存限制：{memoryLimit || 256}MB</Text>
          </Space>
        </Space>
      </div>
    </div>
  );

  // 提交记录内容
  const renderSubmissionHistory = () => (
    <div style={{ padding: '8px' }}>
      <SubmissionList
        userId={1}
        problemId={problem?.id}
        onViewDetail={(submitId) => {
          // 这里可以添加查看详情的逻辑
          console.log('查看提交详情:', submitId);
        }}
      />
    </div>
  );

  // 题解内容
  const renderSolution = () => (
    <div style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
      <Typography.Text>暂无题解</Typography.Text>
    </div>
  );

  const tabItems = [
    {
      key: 'description',
      label: '题目内容',
      icon: <FileTextOutlined />
    },
    {
      key: 'solution',
      label: '题解',
      icon: <BulbOutlined />
    },
    {
      key: 'submissions',
      label: '提交记录',
      icon: <HistoryOutlined />
    }
  ];

  return (
    <div className="problem-description">
      <Card styles={{ body: { padding: 0 } }}>
        {/* 选项卡在顶部，带背景色区分 */}
        <div style={{ background: '#fafafa', borderBottom: '1px solid #f0f0f0' }}>
          <Tabs
            activeKey={activeTab}
            onChange={setActiveTab}
            items={tabItems}
            size="small"
            style={{ margin: 0 }}
            tabBarStyle={{ margin: '0 16px', paddingTop: '8px' }}
          />
        </div>

        {/* 内容区域 */}
        <div style={{ padding: '16px' }}>
          {activeTab === 'description' && (
            <div>
              {/* 题目标题独占一行 */}
              <div style={{ marginBottom: '16px' }}>
                <Title level={2} style={{ margin: 0, borderBottom: '1px solid #eaecef', paddingBottom: '0.3em' }}>{problem.title}</Title>
                {/* 标签在标题下方 */}
                <Space style={{ marginTop: '10px' }}>
                  <Tag color={{
                    1: 'green',
                    2: 'orange',
                    3: 'red'
                  }[problem.difficulty]}>
                    {{ 1: '简单', 2: '中等', 3: '困难' }[problem.difficulty]}
                  </Tag>
                  {/* 题目标签 */}
                  {tags && tags.map((tag) => (
                    <Tag key={tag.id} color={tag.color || 'blue'}>
                      {tag.name}
                    </Tag>
                  ))}
                </Space>
              </div>
              {renderProblemContent()}
            </div>
          )}
          {activeTab === 'solution' && renderSolution()}
          {activeTab === 'submissions' && renderSubmissionHistory()}
        </div>
      </Card>
    </div>
  );
};

export default ProblemDescription;